<style lang="less">
  #help-wrapper {
    background: #fff url(~@/assets/new-house/new_house_bg.jpg) no-repeat;
    .search {
      margin: 2em 0 0 0;
      padding-bottom: 3em;
      text-align: center;
    }
    p {
      margin: 0;
      padding: 0;
    }

    .banner-out {
      height: 25rem;
      margin: 0 auto;
      padding: 2rem 0;
      background-image: url('~@/assets/help/banner02.jpg');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .help-out {
      margin-top: 2rem;
    }

    .spacing {
      width: 100%;
      height: 3rem;
      background-color: #f4f4f4
    }

    .help {
      display: flex;
      width: 86%;
      margin: 2rem auto;
    }

    .line {
      margin: 1rem 0;
      padding-left: .5rem;
      border-left: .2rem solid #FF8300;
      font-size: 1.5rem;
    }

    .introduce {
      background-color: white;
      margin-top: 1rem;
    }

    .introduce-out {
      margin: 0 auto;
    }
    .content{
      padding-top: 9em;
    }

    .content-inner {
      width: 80%;
      margin: 0 auto;
    }

    .promise-out {
      width: 80%;
      margin: 0 auto;
      background-color: #f4f4f4;
    }

    .promise-out > p {
      padding: 1.5rem 0;
      text-align: center;
      font-size: 2rem;
    }

    .accept-out {
      display: flex;
    }

    .accept-item {
      margin-bottom: 1em;
      flex-grow: 1;
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    .word-desc {
      display: flex;
      flex-direction: column;
      font-size: 1.2rem;
      margin-left: 1.3rem;
    }

    .accept-item img {
      width: 26%;
    }

    .accept-p {
      margin: 0;
      font-weight: 600;
    }

    .accept-explain {
      width: 69%;
      font-size: .8rem;
      color: gray;
    }

    .order-item {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .order-item img {
      width: 29%;
    }

    .order-p {
      margin: 0;
      font-size: 1.2rem;
      padding: .8rem 0;
      font-weight: 600;
    }

    .order-explain {
      width: 69%;
      font-size: .8rem;
      color: gray;
      text-align: center;
    }
    .new-carousel {
     width: 1190px;
     margin: 1.5em auto 0 auto;
     padding-bottom: 5em;
     .ivu-carousel-arrow{
       top: 30%;
     }
     .item-wrapper {
       display: flex;
       justify-content: flex-start;
     }
     .item {
       height: 295px;
       width: 215px;
       margin-right: 2em;
       margin-left: 5px;
       .link {
         display: block;
         position: relative;
         img {
           width: 100%;
           height: 295px;
           display: block;
           background: #fbf8a8;
         }
         .head {
           position: absolute;
           left: 0;
           bottom: 0;
           width: 50%;
           background: rgba(255,131,26,0.70);
           display: flex;
           height: 35px;
           align-items: center;
           span {
             font-size: 20px;
             color: #fff;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
           }
         }
         .order {
           position: absolute;
           bottom: 0;
           width: 100%;
           background: rgba(255,131,26,0.70);
           display: flex;
           align-items: center;
           .go {
             line-height: 35px;
             color: #fff;
             cursor: pointer;
             text-decoration: none;
             text-align: center;
             font-size: 20px;
             width: 100%;
             height: 35px;
          }
         }
       }
     }
   } 
  }
</style>
<template>
  <div id="help-wrapper">
    <Navigator></Navigator>
    <div class="content">
      <div class="banner-out"></div>
      <div class="content-inner">
        <div class="help-out">
          <p class="line">{{help}}</p>
          <brief></brief>
          <div class="help">
            <div class="order-item">
              <img src="~@/assets/help/professional.png" alt=""/>
              <p class="order-p">专业顾问</p>
              <p class="order-explain">5年从业经验,熟知买各环节关键点,全程把关</p>
            </div>
            <div class="order-item">
              <img src="~@/assets/help/objective.png" alt=""/>
              <p class="order-p">客户立场</p>
              <p class="order-explain">根据客户需求,全城帮找楼盘,无推销,无骚扰</p>
            </div>
            <div class="order-item">
              <img src="~@/assets/help/favourable.png" alt=""/>
              <p class="order-p">用心服务</p>
              <p class="order-explain">从选房到成交,全程免费服务,无隐形收费</p>
            </div>
            <div class="order-item">
              <img src="~@/assets/help/free.png" alt=""/>
              <p class="order-p">全程免费</p>
              <p class="order-explain">全面分析楼盘利弊,为客户争取更多利益</p>
            </div>
          </div>
        </div>
      </div>
      <div class="spacing"></div>
      <div class="content-inner">
        <div class="introduce">
          <p class="line">{{introduce}}</p>
          <Carousel v-model="value2" dots='none' :autoplay-speed="8000" autoplay class="new-carousel">
             <Carousel-item class="item-wrapper" :key="index" v-for="(teams, index) in list">
               <div class="item" v-for="team in teams">
                 <div class="link">
                   <img :src="team.headPhoto" alt="">
                   <div class="order">
                     <a href="javascript:void(0)" v-appointment="`${team.id},kMANAGER`" class="go">立即预约</a>
                  </div>
                 </div>
               </div>
             </Carousel-item>
           </Carousel>
        </div>
      </div>
      <div style="width:100%;background-color:#f4f4f4">
        <div class="promise-out">
          <p>{{promise}}</p>
          <div class="accept-out">
            <div class="accept-item">
              <img src="~@/assets/help/xiao.png" alt=""/>
              <div class="word-desc">
                <p class="accept-p">不推销</p>
                <p class="accept-explain">为您选择合适的楼盘</p>
              </div>
            </div>
            <div class="accept-item">
              <img src="~@/assets/help/you.png" alt=""/>
              <div class="word-desc">
                <p class="accept-p">不诱导</p>
                <p class="accept-explain">为您全面分析房源利弊</p>
              </div>
            </div>
            <div class="accept-item">
              <img src="~@/assets/help/zhuanye.png" alt=""/>
              <div class="word-desc">
                <p class="accept-p">坚持专业</p>
                <p class="accept-explain">把关选房个环节,让你更加信赖</p>
              </div>
            </div>
            <div class="accept-item">
              <img src="~@/assets/help/yongxin.png" alt=""/>
              <div class="word-desc">
                <p class="accept-p">用心服务</p>
                <p class="accept-explain">为您考虑更多争取更大的利益</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <PageFooter></PageFooter>
  </div>
</template>

<script>

  import brief from './brief'
  import api from '@/service/api'

  export default {
    components: {
      Navigator: require('@/components/Navigator.vue'),
      brief,
      PageFooter: require('@/components/PageFooter/index.vue')
    },
    data () {
      return {
        help: '什么是专家帮选',
        introduce: '团队介绍',
        promise: '我们承诺',
        banDescribes: null,
        helpDescribes: null,
        acceptDescribes: null,
        list: [],
        value2: 0
      }
    },
    methods: {
      search () {
        api.team().then((res) => {
          this.list =  _.chunk(res.data.teams, 5);
        })
      }
    },
    mounted () {
      this.search()
    }
  }
</script>

